<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <script src="/assets/wang-editor/wangEditor.min.js"></script>

    <style>

        .info .el-col, .info .el-select, .info .el-input {
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>运营人员管理</h2>

    <el-button type="primary" @click="createUser">新增运营人员</el-button>
    <!-- 数据表 -->
    <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%">
        <el-table-column
                property="username"
                label="用户名"
                width="150">
        </el-table-column>

        <el-table-column
                property="empName"
                label="姓名"
                width="150">
        </el-table-column>

        <el-table-column
                property="deptName"
                label="部门"
                width="150">
        </el-table-column>

        <el-table-column
                property="status"
                label="状态"
                width="100">
            <template #default="scope">
                <span :style="scope.row.status==1?'color:green':'color:red'">{{scope.row.status==1?"激活":"冻结"}}</span>
            </template>

        </el-table-column>

        <el-table-column
                label="操作"
                width="300">
            <template #default="scope">
                <el-button type="text" size="small" @click="onEdit(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="onUpdateStatus(scope.row)">{{scope.row.status==1?"冻结":"激活"}}</el-button>
                <el-button type="text" size="small" @click="onDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <!-- 分页组件 -->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="count"
            :current-page="page"
            @current-change="changePage">
    </el-pagination>
    <!-- 新增/修改图书表单 -->
    <el-dialog :title="dialogTitle" v-model="dialogFormVisible" width="800px" top="5vh" center>
        <div class="info">
            <el-form :model="form" ref="userForm" :rules="rules">
                <el-form-item prop="username" label-width="0px" >
                    <el-input v-model="form.username" :disabled="dialogModel=='update'?true:false" placeholder="请输入用户名" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item prop="password" label-width="0px">
                    <el-input v-model="form.password" :disabled="dialogModel=='update'?true:false" placeholder="请输入初始密码" type="password" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item prop="empName" label-width="0px">
                    <el-input v-model="form.empName" placeholder="请输入姓名" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item prop="deptName" label-width="0px">
                    <el-input v-model="form.deptName" placeholder="请输入部门" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span class="dialog-footer">
                <!-- 提交按钮 -->
              <el-button type="primary" v-on:click="onSubmit('userForm')" style="width: 100%">确认提交</el-button>
            </span>
        </div>
    </el-dialog>
</div>

<script>
    let editor;
    const Main = {
        data() {
            return {
                dialogFormVisible: true //控制表单是否显示
                , dialogModel: "create" //表单提交模式 create-新增,update-修改
                , dialogTitle: "" //表单标题
                , form: {
                    userId: null
                    , username: ""
                    , password: ""
                    , empName: ""
                    , deptName: ""
                }
                , formLabelWidth: '120px' //表单文本宽度
                , tableData: [{}] //图书分页数据
                , count: 0 //记录总数
                , page: 1 //当前页码
                , pageCount : 0 //总页数
                , rules: { //校验规则
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: false, message: '请输入密码', trigger: 'blur'}
                    ],
                    empName: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    deptName: [
                        {required: true, message: '请输入部门', trigger: 'blur'}
                    ]
                }
            }
        }
        , methods: {
            showDialog(model, data) {
                this.dialogModel = model;
                if (model == "create") {
                    this.dialogTitle = "新增运营人员";
                    this.form.username = "";
                    this.form.password = "";
                    this.form.empName = "";
                    this.form.deptName = "";
                    this.dialogFormVisible = true;
                } else if (model == "update") {
                    if (data != null) {
                        this.dialogTitle = "修改运营人员基本信息";
                        this.form = data;
                        this.dialogFormVisible = true;
                    }
                }
            }
            , createUser() {
                this.showDialog("create");
            }
            , onEdit : function(row){
                if (row != null) {
                    //点击修改按钮,显示"修改图书"表单
                    //row代表当前行数据
                    this.showDialog("update", row);
                }
            }
            , onDelete: function(row){
                const objApp = this;
                this.$confirm("确定要删除[" + row.username + "]吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning"
                }).then(() => {
                    //处理删除操作
                    const params = new URLSearchParams();
                    axios.delete("/api/users/" + row.userId , params)
                        .then(function(response){
                            const json = response.data;
                            if(json.code == "0"){
                                objApp.changePage(objApp.page);
                                ElementPlus.ElMessage.success({
                                    message: "数据已删除"
                                    ,type : "success"
                                })
                            }else{
                                console.error(json);
                                ElementPlus.ElMessage.error({
                                    message: json.message
                                    ,type : "error"
                                })
                            }
                        })
                });
            }, onUpdateStatus: function(row){
                const objApp = this;
                //处理删除操作
                const params = new URLSearchParams();
                axios.put("/api/users/" + row.userId +"/status", params)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            objApp.changePage(objApp.page);
                            ElementPlus.ElMessage.success({
                                message: json.data.detail
                            })
                        }else{
                            ElementPlus.ElMessage.error({
                                message: json.message
                            })
                        }
                    })
            }
            , onSubmit: function (formName) {
                const objApp = this;
                const formData = this.form;

                this.$refs[formName].validate(function (valid) {

                    if (valid) {

                        const params = new URLSearchParams();
                        if(objApp.dialogModel == "update"){
                            params.append("userId", objApp.form.userId);
                        }
                        params.append("username", objApp.form.username);
                        params.append("password", objApp.form.password);
                        params.append("empName", objApp.form.empName);
                        params.append("deptName", objApp.form.deptName);

                        let req = null;
                        if(objApp.dialogModel == "create"){
                            req = axios.post("/api/users",params);
                        }else if(objApp.dialogModel == "update"){
                            req = axios.put("/api/users/" + objApp.form.userId ,params);
                        };
                        req.then(function(response){
                            const json = response.data;
                            if(json.code == "0"){
                                ElementPlus.ElMessage.success({
                                    message : "数据处理成功"
                                })
                                objApp.dialogFormVisible = false;
                                if(objApp.dialogModel == "create"){
                                    objApp.changePage(objApp.pageCount);
                                }else if(objApp.dialogModel == "update"){
                                    objApp.changePage(objApp.page);
                                }
                            }else{
                                console.error(json);
                                ElementPlus.ElMessage.error({
                                    message : json.message
                                })
                            }
                        })
                    }
                });
            }
            , changePage(page) {
                //显示第几页数据
                const objApp = this;
                axios.get("/api/users?page=" + page)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            const userList = json.data.list;
                            objApp.tableData.splice(0, objApp.tableData.length);
                            userList.forEach(function (item) {
                                objApp.tableData.push(item);
                            });
                            objApp.count = json.data.count;
                            objApp.page = page;
                            if(json.data.count % 10 == 0){
                                objApp.pageCount = Math.trunc(json.data.count / 10);
                            }else{
                                objApp.pageCount = Math.trunc(json.data.count / 10) + 1;
                            }

                        }else{
                            console.error(json);
                        }
                    })
            }

        }
        , mounted() {
            this.dialogFormVisible = false;
            const objApp = this;
            this.changePage(1);
        }
    };
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app")
</script>

</body>
</html>